<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '登录',
  },
  needLogin: false,
}
</route>

<template>
  <view class="login-container">
    <ea-navbar
      :left-arrow="true"
      :bordered="false"
      :safeAreaInsetTop="true"
      :fixed="true"
      placeholder
      selector="login"
      :title="t('pages.auth.login.title')"
      @click-left="handleClickLeft"
    />
    <style-fire v-if="skinStore.getClass === 'fire'"></style-fire>
    <style-water v-else-if="skinStore.getClass === 'water'"></style-water>
    <style-wind v-else></style-wind>
  </view>
</template>

<script lang="ts" setup>
  import { EaNavbar } from '@/components/ea-navbar';
  import { useI18n } from '@/locale/index';
  import { useSkinStore } from '@/store/modules/skin';

  import StyleFire from './components/fire/index.vue';
  import StyleWater from './components/water/index.vue';
  import StyleWind from './components/wind/index.vue';

  const { t } = useI18n();
  const skinStore = useSkinStore();

  function handleClickLeft() {
    uni.navigateBack();
  }
</script>

<style lang="scss" scoped>
  @import 'wot-design-uni/components/wd-cell/index';
  /* 在父容器上使用flex布局 */
  .login-container {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 100vh; /* 父容器需要有确定的高度 */
    background-color: $-color-white;
  }

  .wot-theme-dark .login-container {
    background-color: $-dark-background2;
  }
</style>
